<template>
	<view class="categoryContainer">
		<!-- 大图和滑块容器 -->
		<view class="categoryItem" v-for="(cateItem,index) in categoryModule" :key="index" >
			<!-- 大图 -->
			<image :src="cateItem.titlePicUrl"></image>
			<!--滑块 -->
			<scroll-view scroll-x="true" enable-flex class="scrollView">
				<view class="scrollItem" v-for="(item,index) in cateItem.itemList" :key="item.id">
					<image :src="item.showPicUrl"></image>
					<text>{{item.name}}</text>
				</view>
				<view class="scrollItem more">
					查看更多
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	export default{
		name:"category",
		computed:{
			...mapGetters(['categoryModule'])
		}
	}
</script>

<style lang="stylus">
.categoryContainer
	margin-top 10upx
	.categoryImg
		width 100%
		height 370upx
	.scrollView
		// display flex
		white-space nowrap
		.scrollItem
			display inline-block
			width 200upx
			margin-left 20upx
			vertical-align top
			&.more
				line-height 200upx
				text-align center
				background-color red
				vertical-align top
			image
				width 200upx
				height 200upx
				background-color red
			text
				font-size 24upx
				overflow hidden
				white-space pre-wrap
				display -webkit-box
				-webkit-box-orient vertical
				-webkit-line-clamp 2
			
			
</style>
